<template>
  <el-dialog
    title="执行人绑定"
    :visible.sync="dialogVisible"
    width="60%"
    :close-on-click-modal="false"
    center
    :before-close="handleClose"
  >
    <el-tree
      ref="tree"
      :data="treeData"
      node-key="id"
      show-checkbox
      default-expand-all
      :check-strictly="checkStrictly"
      :props="{
          children: 'children',
          label: 'orgName'
       }"
    >
    </el-tree>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import organizationApi from '@/api/system/organizationApi'
import processApi from '@/api/common/processApi'

export default {
  name: 'BindingExecutor',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    processId: Number
  },
  data() {
    return {
      treeData: [],
      checkStrictly: true
    }
  },
  created() {
    this.getOrgTree()
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible && this.processId) {
        this.getBoundOrgs()
      }
    }
  },
  methods: {
    getOrgTree() {
      organizationApi.getTreeByDataPerm({}).then(res => {
        this.treeData = res.data
      })
    },
    getBoundOrgs() {
      processApi.getBoundOrgs(this.processId).then(res => {
        if (res.data) {
          // 回显节点状态
          this.$refs.tree.setCheckedKeys(res.data)
        }
      })
    },
    submit() {
      const boundIds = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
      processApi.configOrgForProcess(this.processId, boundIds).then(res => {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        this.handleClose()
      })
    },
    handleClose() {
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style scoped>

</style>
